<template>
  <div>
    <a-form layout="inline" style="margin-bottom: 20px">
      <a-form-item label="查询类型">
        <a-select default-value="teacher">
          <a-select-option value="teacher">教师</a-select-option>
          <a-select-option value="classroom">教室</a-select-option>
          <a-select-option value="class">班级</a-select-option>
        </a-select>
      </a-form-item>
      
      <a-form-item label="开始时间">
        <a-date-picker show-time placeholder="选择开始时间" />
      </a-form-item>
      
      <a-form-item label="结束时间">
        <a-date-picker show-time placeholder="选择结束时间" />
      </a-form-item>
      
      <a-form-item>
        <a-button type="primary">查询</a-button>
      </a-form-item>
    </a-form>
    
    <a-table 
      :columns="columns" 
      :dataSource="data" 
      
    >
      <template slot="time" slot-scope="text, record">
        {{ record.date }} {{ record.time }}
      </template>
    </a-table>
  </div>
</template>

<script>
const columns = [
  {
    title: '教师/教室/班级',
    dataIndex: 'target',
    key: 'target'
  },
  {
    title: '课程名称',
    dataIndex: 'course',
    key: 'course'
  },
  {
    title: '时间',
    dataIndex: 'time',
    key: 'time',
    scopedSlots: { customRender: 'time' }
  },
  {
    title: '持续时间',
    dataIndex: 'duration',
    key: 'duration'
  }
]

const data = [
  {
    key: '1',
    target: '李红梅',
    course: '数据结构',
    date: '2024-03-05',
    time: '1-2节',
    duration: '2小时'
  },
  {
    key: '2',
    target: 'bj007',
    course: '计算机基础',
    date: '2024-03-05',
    time: '3-4节',
    duration: '2小时'
  }
  // 更多数据...
]

export default {
  data() {
    return {
      columns,
      data
    }
  }
}
</script>